﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
          "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .container {
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
      }

      .stage {
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        color: #fafafa;
        width: 100%;
        padding: 20px;
        text-align: center;
        text-shadow: 1px 1px 4px #333;
      }

      .stage > h1 {
        font-weight: 100;
        margin: 0.5em 0;
        padding: 0;
        line-height: 1;
      }

      .stage > p {
        font-weight: 100;
        margin: 0.5em 0;
        padding: 0;
      }
      video {
        object-fit: cover;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <video src="sakura.ogv" autoplay muted loop></video>
    <div class="container">
      <div class="stage">
        <p>Served by</p>
        <h1>LocalFileResource</h1>
        <p>Change contents of Html file and refresh</p>
      </div>
    </div>
  </body>
  <script>
    window.addEventListener("message", (e) => {
      const { data } = e;
      if (data === "refresh") {
        window.location.reload(true);
      }
    });
  </script>
</html>
